<template>
	<view>
		<!-- tab栏 -->
		<view class="tabbox">
			<view v-for="(page, index) in pages" :key="index" class="tab">
				<view :class="{'active': current === index}" @click="checked(index)">
					{{ page.title }}
				</view>
			</view>
		</view>
		<!-- tab栏切换内容 -->
		<view v-if="current === 0" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[0].img2"></image>
					<view>{{ qhpages[0].text }}</view>
				</view>
			</view>
		</view>
		<view v-if="current === 1" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[1].img2"></image>
					<view>{{ qhpages[1].text }}</view>
				</view>
			</view>
		</view>
		<view v-if="current === 2" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[2].img2"></image>
					<view>{{ qhpages[2].text }}</view>
				</view>
			</view>
		</view>
		<view v-if="current === 3" class="textimgbox">
			<view class="nrbox">
				<view class="image2">
					<image class="img2" :src="qhpages[3].img2"></image>
					<view>{{ qhpages[3].text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0, // 默认选中第一个tab
				pages: [
					{ index: 0, title: '进度' },
					{ index: 1, title: "最新" },
					{ index: 2, title: "7日命中" },
					{ index: 3, title: "我的关注" }
				],
				qhpages: [
					{ img2: "../../static/logo.png", text: '进度' },
					{ img2: "../../static/logo.png", text: '最新' },
					{ img2: "../../static/logo.png", text: '7日命中' },
					{ img2: "../../static/logo.png", text: '我的关注' }
				],
			};
		},
		methods: {
			checked(index) {
				this.current = index;
			}
		}
	};
</script>

<style>
	.tabbox {
		width: 100%;
		display: flex;
		padding: 3% 0;
		justify-content: center;
		align-items: center;
	}

	.tab {
		flex: 1;
		text-align: center;
		margin: 0 10rpx;
		background-color: white;
		border: 2rpx solid white;
		border-radius: 20px;
		color: black;
		padding: 1%;
	}

	.textimgbox {
		width: 100%;
		background-color: white;
		height: 70vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.img2 {
		width: 200rpx;
		height: 200rpx;
	}

	.active {
		background-color: #ffe0e0;
		color: red; 
		border-color: red;
		width: 100%;
		height: 100%;
	}
	
	.tab::after {
		content: none;
	}
</style>